<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
    }
  </style>
</head>
<body>
  <input type="button" value="移动400px">
  <div class="box"></div>
  <script>
    var input = document.querySelector('input');
    var box = document.querySelector('.box');
    var current = box.offsetLeft;
    var target = 400;
    var step = 10;
    var time_id = null;
    input.onclick = function(time_id){
    
      // var time_id = setInterval(function(){
      //   if(time_id > 0){
      //   time_id = null;
      //   time_id = 0;
      //   console.log(time_id)
      // }

      //   if(current <= target){
      //     var x =  current += step;
      //   }else{
      //     clearInterval(time_id)
      //   }
      //   box.style.left = x + 'px';
      //   // console.log(1)
      // },30);
      animate(box,current,800,20);
     
    }
    
    function animate(element,current,target,step){
      var time_id = setInterval(function(){
        if(time_id > 0){
        time_id = null;
        time_id = 0;
        // console.log(time_id)
      }
        if(current <= target){
          var x =  current += step;
        }else{
          clearInterval(time_id)
        }
        box.style.left = x + 'px';
        // console.log(1)
      },30);
    }
  </script>
</body>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      left: 0;
      top: 0;
    }
  </style>
</head>
<body>
  <input type="button" value="移动400">
  <div class="box"></div>
  <script>
    var btn = document.querySelector('input');
    var box = document.querySelector('.box');
    //多点几次，速度越来越快，原因是创建了多个定时器
    // btn.onclick = function(){
    //   var timeID = setInterval(function(){
    //     var step = 10;
    //     var target = 400;
    //     var current = box.offsetLeft;
    //     if(current >= target){
    //       current = target;
    //       box.style.left = current + 'px';
    //       clearInterval(timeID);
    //     }else{
    //       current += step;
    //       box.style.left = current + 'px';
    //     }
    //   },30);
    // };
    //解决方案：整个程序执行过程中只能有一个定时器
    // var timeID = null;
    // var step = 10;
    // var target = 400;
    // var current = box.offsetLeft;
    // btn.onclick = function(){
    //   if(timeID){
    //     //如果定时器存在，停止定时器
    //     clearInterval(timeID);
    //     timeID = null;
    //   };
    //   timeID = setInterval(function(){
    //     if(current >= target){
    //       current = target;
    //       clearInterval(timeID);
    //     }else{
    //       current += step;
    //     };
    //     box.style.left = current + 'px';
    //   },30);
    // };
    //封装成函数
    var timeID = null;
    btn.onclick = function(){
      animate(box,400,10);
    };
    function animate(element,target,step){
      if(timeID){
        //如果定时器存在，停止定时器
        clearInterval(timeID);
        timeID = null;
      };
      timeID = setInterval(function(){
        var current = element.offsetLeft;
        if(current >= target){
          current = target;
          clearInterval(timeID);
        }else{
          current += step;
        };
        element.style.left = current + 'px';
      },30);
    };
  </script>
</body>
</html>